<template>
    <div class="messageBoard">
        <a-card title="员工留言板">
            <template #extra><a>查看更多</a></template>
            <a-card-grid style="width: 25%; text-align: center" v-for="(item, index) in state" :key="index">
                <div class="messageHeader w-100 d-flex start">
                    <div class="avatar">
                        <img class="w-100 height100" :src="item.avatar" alt="">
                    </div>
                    <div class="userName d-flex align-item-center ml-10">{{item.name}}</div>
                </div>
                <div class="messageContent d-flex align-item-center">{{item.message}}</div>
                <div class="messageFooter d-flex between"> 
                    <div class="dept">{{item.dept}}</div>
                    <div class="time">{{item.time}}</div>
                </div>
            </a-card-grid>
        </a-card>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { reactive } from '@vue/reactivity'
import { getMessage } from '@/api/home/index.js'
import { onMounted } from '@vue/runtime-core'

export default defineComponent({
    setup() {
        onMounted(() => {
            getMessageBorad()
        })
        const state = reactive([])

        const getMessageBorad = () => {
            getMessage().then(res => {
                res.data.result.forEach(el => {
                    state.push(el)
                })
            })
        }

        return {
            state
        }
    },
})
</script>

<style lang="scss" scoped>
.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}
.messageContent {
    color: rgba(0,0,0,.45);
    height: 70px;
}
.messageFooter {
    color: rgba(0,0,0,.45);
}
.messageBoard ::v-deep .ant-card-head {
    min-height: 60px !important;
    line-height: 60px !important;
}
.messageBoard ::v-deep .ant-card-grid {
    height: 174px !important;
}
.messageHeader {
    height: 45px;
}
</style>
